在W3Schools,他们声明两者|并^表示:选择具有以指定值开头的属性的元素.

那有什么区别？

Caret(^):选择一个element(

),其中指定的attribute(rel)的值以某个值(val)开头:

h1[rel^="val"] { /** formatting */ }

h1[rel^="friend"] { color: blue; }

I'm Blue.
I'm Blue.
I'm Black.

2> Harry..：

---

当w3schools宣布两个| 和^选择以定义值开头的属性

不,|不用于选择属性值以特定值开头的元素.

以下是W3C规范关于这些选择器的内容.^{(重点是我的)}

[ATT | = VAL]

表示具有att属性的元素,其值正好是"val"或以"val"开头,后跟" - "(U + 002D).

[ATT ^ = VAL]

表示具有att属性的元素,该属性的值以前缀"val"开头.如果"val"是空字符串,则选择器不代表任何内容.

因此,|属性选择器中的符号将仅选择其属性值正好是给定值的元素,或者以给定值后跟连字符开头.

正如你可以在下面的代码段看到,其使用属性选择器|([data-test |= 'val']当该属性值是等)不选择元件valid而与所述属性选择器^([data-test ^= 'val'])一样.

div[data-test |= 'val'] {
  color: beige;
}
div[data-test ^= 'val'] {
  background: red;
}

Hello
Hello
Hello

3> Michael_B..：

---

简单的说:

E [foo | ="en"] 匹配......

一个E元素,其"foo"属性具有以"en"开头的以连字符分隔的值列表

E [foo ^ ="bar"] 匹配......

一个E元素,其"foo"属性值恰好以字符串"bar"开头

扩展信息:

[ATT | = VAL]

表示具有该att属性的元素,其值正好是"val"或以"val"开头,后跟" - ".这主要是为了允许语言子代码匹配(例如,HTML中元素的hreflang属性a).

[ATT ^ = VAL]

表示具有att属性的元素,其值以前缀"val"开头.如果"val"是空字符串,则选择器不代表任何内容.

资料来源:http://www.w3.org/TR/css3-selectors/#selectors

---

例子

HTML

    
testing attribute selectors
    
testing attribute selectors
    
testing attribute selectors
    
testing attribute selectors
    
testing attribute selectors

测试管道(|)选择器.

li[title|="testing"] { background-color: aqua; }

测试插入符号(^)选择器.

li[title^="testing"] { background-color: pink; }

#pipe > li[title|="testing"] {
  background-color: aqua;
}
#caret > li[title^="testing"] {
  background-color: pink;
}

  Testing the pipe (|) selector.


  
testing attribute selectors
  
testing attribute selectors
  
testing attribute selectors
  
testing attribute selectors
  
testing attribute selectors





  Testing the caret (^) selector.


  
testing attribute selectors
  
testing attribute selectors
  
testing attribute selectors
  
testing attribute selectors
  
testing attribute selectors